<template>
    <div class="tablePadding">
        <div>
            <div class="left">
                 <slot name="menuleft" ></slot>
            </div>
            <div class="right">
                <slot name="menuright" ></slot>
            </div>
            <div class="clear">
            </div>
        </div>
        <el-table :data="tableData"  style="width: 100%"
    height="350">
            <el-table-column type="index" label="#">

            </el-table-column>
            <el-table-column 
            v-for="(item,index) in headerData"
            :key="index"
            :prop="item.prop" 
            :label="item.label" 
            :width="item.width"
            > 

                <template slot-scope="scope">
                    <span v-if="!item.slot">{{scope.row[item.prop]}} </span>
                     <slot :name="item.prop" v-bind:row="scope.row" v-bind:index="scope.$index"></slot>
                </template>
            </el-table-column>
            
             <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
                <!-- <el-button 
                @click="handleClick(scope)" 
                type="text" size="small"
                >删除</el-button> -->
                <!-- 
                    子组件定义插槽 
                    slot标签 
                    name="插槽名"
                    v-bind:子组件传递的数据名字 ="传递过去的数据"
                 -->
                 <slot name="menu" v-bind:row="scope.row" v-bind:index="scope.$index"></slot>
            </template>
            </el-table-column>
        </el-table>
        <div>
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:"contents",
    data() {
        return {
            currentPage4:"1"
        }
    },
    // 当前子组件接收父组件传过来的值 我们使用peops接参
    props:{
        // 有分页时候显示的总条数
        total:{
            type:Number,
            default:()=>{
                return 0
            }
        },
        // 该组件是否需要显示分页
        pagination:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        // 子组件接收的名字：{}
        headerData:{
            type:Array,//type定义类型 父组件传递的数据类型 
            default:()=>{
                // 如果父组件没有传递该值过来 那么默认是什么数据
                return []
            }
        },
        tableData:{
            type:Array,//type定义类型 父组件传递的数据类型 
            default:()=>{
                // 如果父组件没有传递该值过来 那么默认是什么数据
                return []
            }
        },
        // 带斑马纹表格 可以带可以不带 根据父组件传子组件决定
        // 带边框表格 可以带可以不带 根据父组件传子组件决定
        // 是否固定表头 
        
    },
    methods: {
        handleClick(row){
            console.log(row.$index);
            let _self = this;
            // this.$emit("父组件接收的名字",&第二个参数可不填用不到的话&传递给父组件的数据) 
            // 子组件王父组件触发时间并且传递参数 用$emit
            _self.$emit("del",row.$index)
        },
        handleSizeChange(val) {
            let _self = this;
        // console.log(`每页 ${val} 条`);
        // 回去切换一页显示多少条
         _self.$emit("SizeChange",val)
        
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // val当前切换的第几页
              let _self = this;
               _self.$emit("CurrentChange",val)
        }
    },
}
</script>
<style scope>
    .tablePadding{
        padding: 40px;
    }
    .left{
        float:left;
    }
    .right{
        float:right;
    }
    .clear{
        clear:both;
    }
</style>